<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #fff;
    }

    .placeholder_div {
        background-color: #fbf9f9;
    }

    .padding {
        padding: 0 0.8rem;
    }

    .item {
        height: 2.5rem;
        border-bottom: 1px solid #e8e8e8;
        line-height: 2.5rem;
        font-size: 0.7rem;
    }

    .item input {
        width: 70%;
        text-align: right;
        height: 2.5rem;
        color: #838383;
        float: right;
    }

    .item span {
        float: right;
        color: #838383;
    }

    textarea {
        padding: 0.5rem 3%;
        height: 4rem;
        width: 94%;
        font-size: 0.6rem;
    }

    .queren_btn {
        margin: 0.5rem 5%;
        width: 90%;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        color: #fff;
        background-color: #FD6151;
        font-size: 0.7rem;
        border-radius: 0.5rem;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <div class="placeholder_div"></div>

        <div class="padding">
            <div class="item">
                患者姓名
                <input type="text" v-model="patient_name" placeholder="请填写患者姓名">
            </div>
            <div class="item" onclick="select_sex()">
                患者姓名
                <span>{{sex_on}}</span>
            </div>
            <div class="item">
                患者年龄
                <input type="text" v-model="patient_age" placeholder="请填写患者年龄">

            </div>
        </div>
        <div class="placeholder_div"></div>

        <div class="padding">
            <div class="item">
                病症
            </div>
            <textarea placeholder="填写患者病症" v-model="bingzheng"></textarea>
        </div>

        <div class="placeholder_div"></div>

        <div class="padding">
            <div class="item">
                处方
            </div>
            <textarea placeholder="填写药材" v-model="diagnosis"></textarea>
        </div>

        <div class="queren_btn" onclick="queren()">确认</div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        // var userId = $api.getStorage('emp').userId

    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            sex_on: "请选择",
            sexs: ["男", "女"],
            sex: "",
            patient_name: "", // 患者姓名
            patient_age: "", //患者年龄
            bingzheng: "", // 患者病症
            diagnosis: "", // 开给患者的处方
        },
        methods: {

        },

    })

    // 选择性别
    function select_sex() {
        api.actionSheet({
            title: '请选择患者性别',
            cancelTitle: '取消',
            buttons: app.sexs
        }, function (ret, err) {
            var index = ret.buttonIndex; //下标从1开始
            if(index == 3){
                return
            }
            app.sex = index;
            for (var i = 0; i < app.sexs.length; i++) {
                if (index - 1 == i) {
                    app.sex_on = app.sexs[i]
                }
            }
        });
    }

    // 确认按钮
    function queren() {
        if (!app.patient_name) {
            toast("请输入患者姓名")
        } else if (!app.sex) {
            toast("请选择患者性别")
        } else if (!app.patient_age) {
            toast("请输入患者年龄")
        } else if (!app.bingzheng) {
            toast("请输入患者的病症")
        } else if (!app.diagnosis) {
            toast("请输入给患者开的处方")
        } else {
            post_ajax("medical/save", {
                userId: 1,
                folderId: 1,
                name: app.patient_name,
                sex: app.sex,
                age: app.patient_age,
                diseases: app.bingzheng,
                diagnosis: app.diagnosis,
            }, function (res, err) {
                if (res) {
                    toast(JSON.stringify(res.msg))

                    api.sendEvent({
                        name: 'baocun_yian',
                    });

                    setTimeout(function () {
                        api.closeWin()
                    }, 500);
                } else {
                    alert("网络不通畅，请稍后再试！")
                }
            })
        }
    }
</script>